<template>
  <div id="bg" :class="{'hidden':!selfShow}">
    <div style="width: 750px;padding-bottom: 40px;margin: 0px auto;background:#FFFFFF ;border-radius: 10px"  id="mg">
      <div class="top">
        <div style="display: flex;flex-direction: row;justify-content: space-between">
          <span class=" s1 el-icon-close" style="margin-left: 33px;color:#4381E6"></span>
          <span class="order-title">{{$t('resourceOrder.orderInfo')}}</span>
          <span class=" s1 el-icon-close" @click="onClose"></span>
        </div>
      </div>
      <div class="main" v-if="customData!==null">
        <!--基本信息-->
        <div class="container" >
          <span class="title">{{$t('resourceOrder.info')}}</span>
          <div class="d1">
            <span>{{$t('resourceOrder.orderNo')}}</span>
            <div class="d2">
              <span>{{customData.orderNo}}</span>
            </div>
          </div>
          <div class="d1">
            <span>{{$t('resourceOrder.orderTime')}}</span>
            <div class="d2">
              <span>{{customData.createDate}}</span>
            </div>
          </div>
          <div class="d1">
            <span>{{$t('Info.account')}}</span>
            <div class="d2">
              <span>{{customData.account}}</span>
            </div>
          </div>
          <div class="d1">
            <span>{{$t('Info.press')}}</span>
            <div class="d2">
              <span>{{customData.pressName}}</span>
            </div>
          </div>
          <div class="d1">
            <span>{{$t('Info.userName')}}</span>
            <div class="d2">
              <span>{{customData.contacts}}</span>
            </div>
          </div>
          <div class="d1">
            <span>{{$t('Info.phone')}}</span>
            <div class="d2">
              <span>{{customData.contactWay}}</span>
            </div>
          </div>
        </div>

        <!--费用-->
        <div class="container">
          <hr>
          <span class="title" style="margin-top: 20px">{{$t('resourceOrder.cost')}}</span>
          <div class="section" v-for="item in customData.pageInfo.list" :key="item">
            <div class="d3">
              <span class="s2">{{item.resourceName}}</span>
              <div style="width: 220px">
                <span class="s4" style="font-size: 14px;color: black" v-if="item.purchaseType==2">{{item.purchaseDays}}</span>
                <span style="font-size: 14px" v-if="item.purchaseType==2">{{day}}</span>
                <span style="font-size: 14px" v-if="item.customizeType==1">x {{item.purchaseNum}}</span>
                <span class="s3" style="float:right">￥ {{item.resourceTotalPrice}}</span>
              </div>
            </div>
            <div class="d4">
              <span class="s4">{{$t('resourceOrder.priceStructure')}}</span>
              <span class="s4" style="margin-left: 5px">{{$t('shoppingCartOrder.basePrice')}}</span>
              <span class="s4" style="color:red;font-weight: bolder">￥ {{item.resourceUnitPrice}}</span>
              <span class="s4" style="margin-left: 5px">x 1</span>
            </div>
            <div class="d4" v-if="item.knowledgeNum!==null">
              <span class="s4">{{$t('resourceOrder.priceStructure')}}</span>
              <span class="s4" style="margin-left: 5px">{{$t('shoppingCartOrder.knowledge')}}</span>
              <span class="s4" style="color:red;font-weight: bolder">￥ {{item.knowledgeUnitPrice}}</span>
              <span class="s4" style="margin-left: 5px">x  {{item.knowledgeNum}}</span>
            </div>
            <div class="d4" v-if="item.animationOneNum!==null">
              <span class="s4">{{$t('resourceOrder.priceStructure')}}</span>
              <span class="s4" style="margin-left: 5px">{{$t('shoppingCartOrder.animationLow')}}</span>
              <span class="s4" style="color:red;font-weight: bolder">￥ {{item.animationOneUnitPrice}}</span>
              <span class="s4" style="margin-left: 5px">x  {{item.animationOneNum}}</span>
            </div>
            <div class="d4" v-if="item.animationTwoNum!==null">
              <span class="s4">{{$t('resourceOrder.priceStructure')}}</span>
              <span class="s4" style="margin-left: 5px">{{$t('shoppingCartOrder.animationWell')}}</span>
              <span class="s4" style="color:red;font-weight: bolder">￥ {{item.animationTwoUnitPrice}}</span>
              <span class="s4" style="margin-left: 5px">x  {{item.animationTwoNum}}</span>
            </div>
            <div class="d4" v-if="item.animationThreeNum!==null">
              <span class="s4">{{$t('resourceOrder.priceStructure')}}</span>
              <span class="s4" style="margin-left: 5px">{{$t('shoppingCartOrder.animationHigh')}}</span>
              <span class="s4" style="color:red;font-weight: bolder">￥ {{item.animationThreeUnitPrice}}</span>
              <span class="s4" style="margin-left: 5px">x  {{item.animationThreeNum}}</span>
            </div>
            <div class="d4" v-if="item.animationFourNum !==null">
              <span class="s4">{{$t('resourceOrder.priceStructure')}}</span>
              <span class="s4" style="margin-left: 5px">{{$t('shoppingCartOrder.animationHighly')}}</span>
              <span class="s4" style="color:red;font-weight: bolder">￥ {{item.animationFourUnitPrice}}</span>
              <span class="s4" style="margin-left: 5px">x  {{item.animationFourNum }}</span>
            </div>
            <div class="d4" v-if="item.purchaseUnitPrice>0">
              <span class="s4">{{$t('resourceOrder.priceStructure')}}</span>
              <span class="s4" style="margin-left: 5px">{{$t('resourceOrder.buyByTime')}} </span>
              <span class="s4" style="color:red;font-weight: bolder">￥ {{item.purchaseDays}}</span>
              <span style="color:red;font-size: 14px">{{day}}</span>
              <span class="s4" style="margin-left: 5px;color:red">（{{$t('resourceOrder.unitPrice')}}* {{item.purchaseUnitPrice}}）</span>
              <span class="s4" style="margin-left: 5px">x  1</span>
            </div>
          </div>
          <!--分页-->
          <div style="width: 100%;display: flex;flex-direction: row;justify-content: center;margin-top: 25px;padding-bottom: 5px">
            <div class="block">
              <el-pagination  @current-change="getChange(page4)"
                              :current-page.sync="page4"
                              layout="prev,pager,next"
                              :page-size="pageSize"
                              :total="commonTotal">
              </el-pagination>
            </div>
          </div>

        </div>

        <!--总价-->
        <div class="container">
          <hr>
          <div class="d5">
            <span style="margin-left: 300px" class="s6">{{$t('resourceOrder.totalOrders')}}:</span>
            <span class="s7" style="margin-right: 20px">￥ {{customData.totalAmount}}</span>
          </div>
          <div class="d6">
            <span style="margin-left: 300px;margin-top: 5px" class="s6">{{$t('resourceOrder.totalPay')}}:</span>
            <span class="s8">￥ {{customData.payAmount}}</span>
          </div>
          <div class="d7" v-if="myIndex==0">
            <span class="s9">{{$t('resourceOrder.orderPayed')}}</span>
          </div>
          <div class="d7" v-if="myIndex==3">
            <span class="s9">{{$t('resourceOrder.orderCompleted')}}</span>
          </div>
          <div class="d7" v-if="myIndex==2">
            <span class="s9">{{$t('resourceOrder.orderCancel')}}</span>
          </div>
          <div class="d7" v-if="myIndex==1">
            <div class="d8">
              <button class="btn3">取消订单</button>
              <button class="btn4">立即支付</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="tips" class="tips" :hidden='tips'>
      <img :src="resultIcon"/>
      <span>{{msg}}</span>
    </div>
  </div>
</template>

<script>
  import bus from '../../assets/eventBus'
  import ajax from '../../common/ajax'
  import api from '../../common/api'
  import util from '../../common/util'
  let orderNo

    export default {
        name: "CustomDetail",
      data () {
        return {
          selfShow:false,
          resultIcon: '../assets/images/icon_error.png',
          msg: '',
          tips: true,
          resourceList:null,
          myIndex:0,
          customData:null,
          page4:1,
          commonTotal:0,
          pageSize:5,
          day:''
        }
      },
      beforeCreate () {
        document.querySelector('body').setAttribute('style', 'overflow-x:hidden')
      },
      beforeDestroy () {
        document.querySelector('body').removeAttribute('style')
      },
      mounted(){
        /**
         * 打开订单弹窗，初始化数据
         */
        let that = this
        bus.$on('getCustomResource', function (a,b) {
          that.myIndex = a
          that.selfShow = true
          orderNo=b
          loadCustomDetail(1,that)

        })
      },
      methods:{
        /**
         * 关闭订单弹窗
         */
        onClose(){
          this.selfShow = false
        },

        /**
         * 时间格式转换
         */
        loadCustomDate(){
          this.customData.createDate=util.formate(this.customData.createDate)
        },

        /**
         * 分页方法
         */
        getChange(val){
          loadCustomDetail(val,this)
        }
      }
    }

  /**
   * 分页获取订单详情
   */
  function loadCustomDetail(page4,that){
    console.log(that)

    ajax.get({
      url: api.customDetail.routeName + api.customDetail.children.detail,
      data: {
       orderNo: that.myIndex,
      pageNo: page4,
      pageSize: 5,
      },
      success(res) {
        that.customData= res
        //把天数改为对应的月份或年
        if(that.customData!==null){
          that.customData.pageInfo.list.forEach(el=>{
            if(el.purchaseDays%30==0){
              el.purchaseDays=el.purchaseDays/30
              that.day='月'
            }else{
              el.purchaseDays=el.purchaseDays/365
              that.day='年'
            }
          })
        }
        // console.log(res)
        that.commonTotal = res.pageInfo.total
        that.loadCustomDate()
      },
      error(e){
        console.log(e)
      }
    })
  }
</script>

<style scoped>
  .order-title{
    font-size: 30px;
    color: white;
    letter-spacing: 3px;
  }

  .s1 {
    font-size: 26px;
    color: white;
    margin-top: 5px;
    margin-right: 30px;
  }

  .s1:hover {
    cursor: pointer;
  }

  .hidden {
    display: none;
  }

  #bg {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.70);
    top: 0;
    z-index: 999;
    overflow-y: auto;
  }

  .top {
    height: 55px;
    background: #4381E6;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    padding-top: 25px;
  }



  ::-webkit-scrollbar {
    width: 2px;
  }
  .title{
    font-size: 20px;
    font-weight: bolder;
    display: block;
  }
  .container{
    width: 600px;
    margin: 25px auto ;
  }
  .d1{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 15px;
    font-size: 14px;
    margin-left: 10px;
  }
  .d2{
    width: 330px;
    text-align: center;
  }


  .tips {
    background: #FFFFFF;
    border: 1px solid #CCCCCC;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.30);
    border-radius: 5px;
    position: fixed;
    top: 0;
    left: 40%;
    width: auto;
    height: 65px;
    z-index: 99;

  }

  .tips img {
    width: 30px;
    height: 30px;
    position: relative;
    margin-top: 18px;
    margin-left: 66px;
  }

  .tips span {
    font-size: 15px;
    color: #3C3C3C;
    letter-spacing: -0.05px;
    line-height: 16px;
    display: inline-block;
    position: relative;
    top: -8px;
    margin-left: 13px;
    padding-right: 66px;
  }

  .d3{
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 20px;
  }

  .s2{
    font-size: 16px;
    font-weight: bolder;
  }
  .d4{
    margin-top: 10px;
  }
  .s3{
    font-size: 14px;
    color: red;
  }
  .s4{
    font-size: 14px;
    color:grey;
  }
  .d5{
    width: 500px;
    margin-top: 20px;
    margin-left: 100px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .d6{
    margin-left: 100px;
    width: 500px;
    margin-top: 15px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .s6{
    font-size: 14px;
    font-weight: bolder;
  }
  .s7{
    font-size: 14px;
  }
  .s8{
    font-size: 20px;
    font-weight: bolder;
    color: red;
  }
  .btn4 {
    width: 100px;
    height: 35px;
    background: #4A90E2;
    border: none;
    border-radius: 3px;
    color: white;
    font-size: 14px;
    float:right;
  }
  .btn4:hover{
    cursor: pointer;
  }
  .d7{
    margin-left: 110px;
    width: 500px;
    margin-top: 15px;
    display: flex;
    justify-content: flex-end;
  }

  .s9{
    font-size: 18px;
    font-weight: bolder;
    color:gray;
    margin-right: 10px;
  }
  .d8{
    width: 300px;
    margin-right: 5px;
    float:right;
  }
  .btn3 {
    width: 100px;
    height: 35px;
    border: none;
    border-radius: 3px;
    background: white;
    font-size: 14px;
    color: #F5A623;
    margin-left: 75px;
  }
  .btn3:hover{
    cursor: pointer;
  }
</style>
